<template>
	<view class="tar-bar">
		<view @tap="consume('follows')" class="tar-bar-item" :class="[folloStat ? 'follow' : '']">
			<view class="icon iconfont icon-xihuan"></view>
			<text>喜欢</text>
		</view>
		<view @tap="consume('unlock')" class="tar-bar-item">
			<view class="icon iconfont icon-weixin"></view>
			<text>解锁社交账户</text>
		</view>
		<view @tap="consume('chat')" class="tar-bar-item">
			<view class="icon iconfont icon-xiaoxi"></view>
			<text>与TA聊天</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			folloStat:{
				type: Boolean,
				default: false
			}
		},
		methods:{
			consume(tyep){
				this.$emit('consume', tyep);
			}
		}
	}
</script>

<style lang="less" scoped>
.tar-bar {
	position: fixed;
	display: flex;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	background-color: #ffffff;
	border-top: 1rpx solid #eeeeee;

	.tar-bar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	text {
		text-align: center;
		line-height: 24rpx;
		font-weight: 700;
	}
	
	& > view:first-child {
		font-size: 24rpx;
		color: #333333;
		.icon-xihuan::before {
			background: #AAAAAA;
			width: 60rpx;
			height: 60rpx;
			margin-top: 30rpx;
			font-size: 28rpx;
			border-radius: 100%;
			color: #ffffff;
			padding: 10rpx 10rpx;
		}
	}
	
	

	& > view:nth-child(2) {
		font-size: 24rpx;
		color: #333333;
		.icon-weixin::before {
			background: linear-gradient(90deg, #feb6ba, #fc82a5);
			width: 50rpx;
			height: 50rpx;
			font-size: 38rpx;
			border-radius: 100%;
			color: #ffffff;
			padding: 10rpx 10rpx;
		}
	}

	& > view:last-child {
		font-size: 24rpx;
		color: #333333;
		.icon-xiaoxi::before {
			background: linear-gradient(90deg, #feb6ba, #fc82a5);
			width: 50rpx;
			height: 50rpx;
			font-size: 38rpx;
			border-radius: 100%;
			color: #ffffff;
			padding: 10rpx 10rpx;
		}
	}
	
	view.follow{
		.icon-xihuan::before {
			background:none;
			background: linear-gradient(90deg, #feb6ba, #fc82a5);
		}
	}
}
</style>
